import React from 'react'
import _ from 'underscore'
import format from 'lib/util/format'
import GridWidget from 'lib/components/GridWidget.jsx'

export default class CrashNameGrid2 extends GridWidget {
  constructor(props){
    super(props)
  }
  renderBody(){
    if(this.props.store.data&&this.props.store.data.length){
      return _(this.props.store.data).chain()
        .map((row,ind) => ({
          el:this.renderRow(row,ind),
          data:row
        }),this)
        .groupBy((rowPair) => rowPair.data.crashType)
        .mapObject((lvl1Rows,lvl1Name) => {
          return _(lvl1Rows).chain()
            .reduce((rows,newRow) => {
              if(!rows.length){
                newRow.el.props.children[0] = React.cloneElement(newRow.el.props.children[0],{
                  rowSpan:lvl1Rows.length
                })
              }else{
                newRow.el = React.cloneElement(newRow.el,{},newRow.el.props.children.slice(1))
                newRow.sliced = true
              }
              return rows.concat([newRow])
            },[])
            .groupBy((rowPair) => rowPair.data.crashCodeInfo)
            .mapObject((lvl2Rows,lvl2Name) => {
              return _(lvl2Rows).chain()
                .sortBy((r) => r.el.props.children.length*(-1))
                .reduce((rows,newRow) => {
                  var lvl2Ind = newRow.sliced?0:1
                  if(!rows.length){
                    newRow.el.props.children[lvl2Ind] = React.cloneElement(newRow.el.props.children[lvl2Ind],{
                      rowSpan:lvl2Rows.length
                    })
                  }else if(newRow.sliced){
                    newRow.el = React.cloneElement(newRow.el,{},newRow.el.props.children.slice(1))
                  }else{
                    newRow.el = React.cloneElement(newRow.el,{},newRow.el.props.children.slice(0))
                  }
                  return rows.concat([newRow.el])
                },[]).value()
            },this)
            .values()
            .value()
        },this)
        .values()
        .flatten(true)
        .value()
    }else{
      return super.renderBody()
    }
  }
}
CrashNameGrid2.defaultProps = _.extend({},GridWidget.defaultProps,{
  // extraClassName:'table-layout no-hover full-border vertical-top',
  extraClassName:'full-border no-hover vertical-top',
  oddColor:false,
  cols:[
    {
      title:'崩溃类型',
      // width:243,
      containerStyle: {
        minWidth: 118,
        maxWidth: '20%'
      },
      key:'crashType'
    }, {
      title:'代码信息',
      // width:400,
      containerStyle: {
        minWidth: 118,
        maxWidth: 550
      },
      key:'crashCodeInfo'
    }, {
      title:'代码位置',
      // width:70,
      containerStyle: {
        minWidth: 33
      },
      key:'crashCodeIndex',
      render:function(fmtVal,rowData){
        return (
          <a className="link-in-list" href={'crashlog#/crashtrace/'+rowData.crashNameId}>
            {fmtVal}
          </a>
        )
      }
    }, {
      title:'首次发生时间',
      // width:100,
      key:'firstTime',
      containerStyle: {
        minWidth: 43
      },
      sortable:true,
      formatter:format.stampToTime

    },{
      title:'最后发生时间',
      // width:100,
      key:'lastTime',
      containerStyle: {
        minWidth: 43
      },
      sortable:true,
      formatter:format.stampToTime
    },{
      title:'应用版本',
      // width:100,
      containerStyle: {
        minWidth: 33
      },
      sortable:true,
      key:'appVersion',
      formatter:function (v) {
        return <span style={{'wordBreak':'break-word'}}>{v}</span>;
      }
    },{
      title:'发生次数',
      // width:100,
      containerStyle: {
        minWidth: 28
      },
      sortable:true,
      key:'count',
      formatter:format.integer
    },{
      title:'影响设备',
      sortable:true,
      // width:100,
      containerStyle: {
        minWidth: 28
      },
      key:'affected',
      formatter:format.integer
    },{
      title:'状态',
      sortable:true,
      // width:70,
      containerStyle: {
        minWidth: 28
      },
      key:'fixed',
      formatter:function(v){
        return v?'已解决':'未解决'
      }
    },{
      title:'优先级',
      sortable:true,
      // width:70,
      containerStyle: {
        minWidth: 28
      },
      key:'follow',
      formatter:function(v){
        return v?'高':'低'
      }
    }]
})
